<!--
 * @Author: cgl
 * @Date: 2023-05-18 15:05:41
 * @LastEditors: cgl
 * @LastEditTime: 2023-08-23 13:49:38
 * @FilePath: \public-health-emergencies-fed:\radiation-hygiene-fe\src\views\index.vue
 * @Description:
 *
 * Copyright (c) 2023 by cgl/微盛信息产业有限公司, All Rights Reserved.
-->
<template>
  <div class="app-container home">
    <div class="home-top">
      <div class="left-box">
        <div class="box-title">
          <img class="icon" src="@/assets/images/icons/quick.png" alt="" />
          <span class="title">快捷入口</span>
        </div>

        <div class="entry-list">
          <div
            class="entry-item"
            v-for="(item, index) in entryList"
            :key="index"
            @click="goTarget(item)"
          >
            <div class="text-box">
              <span class="cname">{{ item.title }}</span>
              <span class="desc">{{ item.subTitle }}</span>
            </div>
            <img :src="item.img" alt="" />
          </div>
        </div>
      </div>

      <div class="right-box">
        <div class="box-title">
          <img class="icon" src="@/assets/images/icons/time.png" alt="" />
          <span class="title">我的待办</span>

          <div class="num" v-if="todoList.length != 0">
            {{ todoList.length }}
          </div>

          <div class="more" @click="handleOpenDetail('todo')">
            <span>更多</span>
            <i class="el-icon-right" style="font-size: 14px"></i>
          </div>
        </div>

        <el-table class="table" :data="todoList" height="174">
          <el-table-column
            label="委托单位"
            align="center"
            prop="organizationName"
            :show-overflow-tooltip="true"
            min-width="200"
          />
          <el-table-column
            label="联系人"
            align="center"
            prop="contactsName"
            min-width="80"
          />
          <el-table-column
            label="联系电话"
            align="center"
            prop="contactsMobile"
            min-width="100"
          />
          <el-table-column
            label="单位地址"
            align="center"
            prop="organizationAddress"
            :show-overflow-tooltip="true"
            min-width="200"
          />
          <el-table-column align="center" label="操作" width="120">
            <template slot-scope="{ row }">
              <el-button
                @click.native.prevent="toUrl(row._url, row)"
                type="text"
              >
                办理
              </el-button>
              <el-button
                v-if="row.processId"
                @click.native.prevent="handleFlowRecord(row)"
                type="text"
              >
                查看流程
              </el-button>
            </template>
          </el-table-column>
        </el-table>
      </div>
    </div>

    <div class="home-middle">
      <div class="left-box">
        <div class="box-title">
          <img class="icon" src="@/assets/images/icons/warn.png" alt="" />
          <span class="title">仪器预警</span>
        </div>

        <el-table class="table" :data="warningEquipmentList" height="174">
          <el-table-column
            label="仪器编号"
            align="center"
            prop="equipmentNumber"
            :show-overflow-tooltip="true"
            min-width="100"
          />
          <el-table-column
            label="仪器名称"
            align="center"
            prop="equipmentName"
            :show-overflow-tooltip="true"
            min-width="100"
          />
          <el-table-column
            label="型号"
            align="center"
            prop="equipmentTypeNumber"
            :show-overflow-tooltip="true"
            min-width="100"
          />
          <el-table-column
            label="预警类型"
            align="center"
            :show-overflow-tooltip="true"
            min-width="100"
          >
            <template slot-scope="{ row }">
              <span
                v-for="(arr, key) in row.obj"
                :key="key"
                @click="openDialogFile(arr)"
                class="viewfile"
              >
                {{ key }}
              </span>
            </template>
          </el-table-column>
          <el-table-column align="center" label="操作" width="80">
            <template slot-scope="{ row }">
              <el-button @click="toUrl('Resource/equipment', row)" type="text">
                办理
              </el-button>
            </template>
          </el-table-column>
        </el-table>
      </div>

      <div class="right-box">
        <div class="box-title">
          <img class="icon" src="@/assets/images/icons/warn2.png" alt="" />
          <span class="title">开票预警</span>
        </div>

        <el-table class="table" :data="invoiceTipList" height="174">
          <el-table-column
            label="委托单位"
            align="center"
            prop="entrustOrganizationName"
            min-width="200"
            show-overflow-tooltip
          >
            <template slot-scope="{ row }">
              <span>{{ row.entrustOrganizationName }}</span>
            </template>
          </el-table-column>
          <el-table-column
            label="申请编号"
            align="center"
            prop="applyNumber"
            min-width="120"
          >
            <template slot-scope="{ row }">
              <span>{{ row.applyNumber }}</span>
            </template>
          </el-table-column>
          <el-table-column
            label="开票日期"
            align="center"
            prop="invoiceDate"
            min-width="120"
          >
            <template slot-scope="{ row }">
              <span>{{ row.invoiceDate }}</span>
            </template>
          </el-table-column>
          <el-table-column
            label="开票操作时间"
            align="center"
            prop="invoiceOperateDate"
            min-width="120"
          >
            <template slot-scope="{ row }">
              <span>{{ row.invoiceOperateDate }}</span>
            </template>
          </el-table-column>
          <el-table-column
            label="发票发送状态"
            align="center"
            prop="invoiceSendStatus"
            min-width="100"
          >
            <template slot-scope="{ row }">
              <el-tag type="danger" v-if="row.invoiceSendStatus == 0"
                >未发送</el-tag
              >
              <el-tag type="success" v-if="row.invoiceSendStatus == 1"
                >已发送</el-tag
              >
            </template>
          </el-table-column>
          <el-table-column align="center" label="操作" width="80">
            <template slot-scope="{ row }">
              <el-button type="text" @click="handleInvoiceTip(row)"
                >办理</el-button
              >
            </template>
          </el-table-column>
        </el-table>
      </div>
    </div>

    <div class="home-bottom">
      <div class="left-box">
        <div class="box-title">
          <img class="icon" src="@/assets/images/icons/warn3.png" alt="" />
          <span class="title">合同预警</span>
        </div>

        <el-table class="table" :data="agreementTipList" height="184">
          <el-table-column
            label="委托单位"
            align="center"
            prop="organizationName"
            :show-overflow-tooltip="true"
            min-width="200"
          />
          <el-table-column
            label="合同编号"
            align="center"
            prop="agreementNumber"
            min-width="100"
          />
          <el-table-column
            label="签订金额"
            align="center"
            prop="signAmount"
            min-width="100"
          >
            <template slot-scope="{ row }">
              {{ row.signAmount && row.signAmount / 100 }}
            </template>
          </el-table-column>
          <el-table-column
            label="结束时间"
            align="center"
            prop="beginTime"
            min-width="100"
          />
          <el-table-column
            label="开始时间"
            align="center"
            prop="endTime"
            min-width="100"
          />
          <el-table-column label="文件" align="center" min-width="100">
            <template slot-scope="{ row }">
              <span
                v-if="row.agreementFileOssId"
                @click="viewFile(row.agreementFileOssId)"
                class="viewfile"
              >
                查看
              </span>
            </template>
          </el-table-column>
          <el-table-column align="center" label="操作" width="80">
            <template slot-scope="{ row }">
              <el-button @click="toUrl('EntrustAgreement', row)" type="text">
                办理
              </el-button>
            </template>
          </el-table-column>
        </el-table>
      </div>

      <!-- <div class="warnright">
				<div class="innertitle">
					<span>剂量计未寄回预警</span>
				</div>

				<el-table :data="warningDosageTimeoutList" height="210">
					<el-table-column label="受检单位名称" align="center" prop="entrustOrganizationName" :show-overflow-tooltip="true"/>
					<el-table-column label="佩戴时间" align="center" :show-overflow-tooltip="true">
						<template slot-scope="{row}">
							{{ parseTime(row.wearingBeginTime, "{y}-{m}-{d}") }}/
							{{ parseTime(row.wearingEndTime, "{y}-{m}-{d}") }}
						</template>
					</el-table-column>
					<el-table-column label="年份" align="center" prop="year" width="100" :show-overflow-tooltip="true"/>
					<el-table-column label="批次" align="center" prop="batchNum" width="100" :show-overflow-tooltip="true"/>
					<el-table-column label="未寄回数量" align="center" :show-overflow-tooltip="true">
						<template slot-scope="{row}">
							<span @click="openhandleDialog(row)" class="viewfile">
								{{ row.timeOutCount }}
							</span>
						</template>
					</el-table-column>
				</el-table>
			</div> -->
    </div>

    <!-- 设置温湿度弹框 -->
    <el-dialog
      title="环境条件"
      :visible.sync="environmentVisible"
      :close-on-click-modal="false"
      width="550px"
      :show-close="false"
      append-to-body
      class="eviromentDialog"
      v-dialogDrag="true"
    >
      <el-form
        :model="formEnvironment"
        :rules="rulesEnvironment"
        ref="formEnvironment"
        size="small"
        label-width="100px"
      >
        <el-row :gutter="20">
          <el-col :span="12">
            <el-form-item label="温度(℃)" prop="temperature">
              <el-input
                v-model="formEnvironment.temperature"
                placeholder="请输入"
                clearable
              />
            </el-form-item>
          </el-col>
          <el-col :span="12">
            <el-form-item label="湿度(%RH)" prop="humidity">
              <el-input
                v-model="formEnvironment.humidity"
                placeholder="请输入"
                clearable
              />
            </el-form-item>
          </el-col>
        </el-row>
      </el-form>

      <div slot="footer">
        <el-button type="primary" @click="submitEnvironment">确 定</el-button>
        <!-- <el-button @click="environmentVisible = false">取 消</el-button> -->
      </div>
    </el-dialog>

    <!-- 查看公告弹框 -->
    <el-dialog
      title="通知发文"
      :visible.sync="dialogVisibleView"
      width="1200px"
      append-to-body
      class="viewdialog"
      v-dialogDrag="true"
    >
      <div class="viewtitle">{{ formNotice.noticeTitle }}</div>
      <div class="viewinfo">
        发布者：{{ formNotice.createNickName
        }}<span class="blank"></span>发布时间：{{ formNotice.createTime }}
      </div>
      <Vue-editor disabled v-model="formNotice.noticeContent"></Vue-editor>
      <div class="filelist">
        <span class="filetitle" v-if="fileList.length != 0">附件：</span>
        <div class="fileitem" v-for="(item, index) in fileList" :key="index">
          <span class="filename" @click="preView(item)">{{ item.name }}</span>
          <span class="download" @click="handleDownload(item)">下载</span>
        </div>
      </div>

      <div slot="footer" class="dialog-footer">
        <el-button @click="dialogVisibleView = false">关 闭</el-button>
      </div>
    </el-dialog>

    <!-- 预览文件弹框 -->
    <el-dialog
      title="预览"
      :visible.sync="dialogVisibleWord"
      class="dialogVisibleWord"
      append-to-body
    >
      <div class="docxRef"></div>
    </el-dialog>

    <!-- 查看证书弹框 -->
    <el-dialog
      title="查看证书"
      :visible.sync="dialogVisibleWarn"
      width="1200px"
      append-to-body
      class="viewdialog"
      v-dialogDrag="true"
    >
      <el-table :data="warningFileList" height="400">
        <el-table-column label="序号" type="index" width="50" align="center" />
        <el-table-column
          label="证书名称"
          align="center"
          :show-overflow-tooltip="true"
        >
          <template slot-scope="{ row }">
            <span
              :class="row.certificateOssId && 'viewfile'"
              @click="viewFile(row.certificateOssId)"
            >
              {{ row.warningCertificateName }}
            </span>
          </template>
        </el-table-column>
        <el-table-column label="证书编号" align="center">
          <template slot-scope="{ row }">
            <span v-if="row.certificateNumber">
              {{ row.certificateNumber }}
            </span>
            <span v-else> —— </span>
          </template>
        </el-table-column>
        <el-table-column label="证书有效期" align="center">
          <template slot-scope="{ row }">
            <span v-if="row.certificateValidity">
              {{ row.certificateValidity }}
            </span>
            <span v-else> —— </span>
          </template>
        </el-table-column>
        <el-table-column label="预警类型" align="center" prop="warningMsg" />
      </el-table>
      <div slot="footer" class="dialog-footer">
        <el-button @click="dialogVisibleWarn = false">关 闭</el-button>
      </div>
    </el-dialog>

    <!-- 查看未寄回弹框 -->
    <el-dialog
      title="查看剂量计"
      :visible.sync="dialogVisiblehandle"
      :close-on-click-modal="false"
      width="1000px"
      class="bldialog"
      v-dialogDrag="true"
    >
      <el-form
        class="handleform"
        disabled
        :model="handleform"
        size="small"
        label-width="80px"
      >
        <el-row :gutter="20">
          <el-col :span="8">
            <el-form-item label="单位名称">
              <el-input v-model="handleform.organizationName" />
            </el-form-item>
          </el-col>
          <!-- <el-col :span="8">
							<el-form-item label="合同编号">
								<el-input v-model="handleform.agreementNumber" />
							</el-form-item>
						</el-col> -->
          <el-col :span="8">
            <el-form-item label="联系人">
              <el-input v-model="filterContact" />
            </el-form-item>
          </el-col>
          <!-- </el-row>
					<el-row :gutter="20"> -->
          <el-col :span="8">
            <el-form-item label="联系电话">
              <el-input v-model="filterMobile" />
            </el-form-item>
          </el-col>
          <!-- <el-col :span="8">
							<el-form-item label="检测周期(天)">
								<el-input-number
									v-model="handleform.monitoringCycle"
									:min="1"
									style="width: 100%;"
								/>
							</el-form-item>
						</el-col>
						<el-col :span="8">
							<el-form-item label="检测启用状态">
								<el-select
									v-model="handleform.monitoringState"
									style="width: 100%">
									<el-option
										v-for="item in dict.type.status_disable"
										:key="item.value"
										:label="item.label"
										:value="item.value">
									</el-option>
								</el-select>
							</el-form-item>
						</el-col>
					</el-row>
					<el-row>
						<el-col :span="24">
							<el-form-item label="单位地址">
								<el-input v-model="handleform.organizationAddress" />
							</el-form-item>
						</el-col>
					</el-row>
					<el-row :gutter="20">
						<el-col :span="8">
							<el-form-item label="佩戴开始日期">
								<el-date-picker
									style="width:100%;"
									v-model="handleform.wearingBeginTime"
									value-format="yyyy-MM-dd HH:mm:ss"
									type="date"
									:picker-options="pickerOptionsHandleF"
									placeholder="">
								</el-date-picker>
							</el-form-item>
						</el-col>
						<el-col :span="8">
							<el-form-item label="佩戴结束日期">
								<el-date-picker
									style="width:100%;"
									v-model="handleform.wearingEndTime"
									value-format="yyyy-MM-dd HH:mm:ss"
									type="date"
									:picker-options="pickerOptionsHandleS"
									placeholder="">
								</el-date-picker>
							</el-form-item>
						</el-col> -->
        </el-row>
      </el-form>

      <el-table class="handletabel" :data="handleform.list" height="350">
        <!-- <el-table-column label="人员编号" align="center" prop="personnelNumber" width="100" /> -->
        <el-table-column
          label="剂量计编号"
          align="center"
          prop="dosageNumber"
        />
        <el-table-column label="姓名" align="center">
          <template slot-scope="scope">
            <span>{{ scope.row.personnelName }}</span>
            <span v-if="scope.row.personnelName && scope.row.dosageType == 1"
              >(内)</span
            >
            <span v-if="scope.row.personnelName && scope.row.dosageType == 2"
              >(外)</span
            >
          </template>
        </el-table-column>
        <!-- <el-table-column label="性别" align="center" width="100">
						<template slot-scope="scope">
							<dict-tag
								:value="scope.row.personnelSex"
								:options="dict.type.sys_user_sex"
							></dict-tag>
						</template>
					</el-table-column> -->
        <!-- <el-table-column label="职业类别" align="center" width="150" :show-overflow-tooltip="true">
						<template slot-scope="scope">
							<dict-tag
								:value="scope.row.occupationalClassification"
								:options="dict.type.occupational_classification"
							></dict-tag>
						</template>
					</el-table-column> -->
        <el-table-column label="剂量计佩戴起止日期" align="center">
          <template slot-scope="scope">
            {{ parseTime(scope.row.wearingBeginTime, "{y}/{m}/{d}") }} -
            {{ parseTime(scope.row.wearingEndTime, "{y}/{m}/{d}") }}
          </template>
        </el-table-column>
        <!-- <el-table-column label="寄出单号" align="center" prop="sendTrackingNumber" /> -->
        <!-- <el-table-column label="剂量当量1" align="center" prop="holeOne" width="100"/>
					<el-table-column label="剂量当量2" align="center" prop="holeTwo" width="100"/>
					<el-table-column label="剂量当量(mSv)" align="center" prop="dosageValue" width="120"/> -->
      </el-table>

      <div slot="footer">
        <el-button @click="dialogVisiblehandle = false">关 闭</el-button>
      </div>
    </el-dialog>

    <!-- more详情弹窗 -->
    <el-dialog
      :title="moreTitle"
      :visible.sync="moreVisible"
      :close-on-click-modal="false"
      width="1000px"
      class="bldialog"
      v-dialogDrag="true"
    >
      <!-- <el-form class="handleform" disabled :model="handleform" size="small" label-width="80px">
					<el-row :gutter="20">
						<el-col :span="8">
							<el-form-item label="单位名称">
								<el-input v-model="handleform.organizationName" />
							</el-form-item>
						</el-col>
					</el-row>
				</el-form> -->

      <el-table class="handletabel" :data="moreList" v-loading="moreLoading">
        <template v-if="moreType == 'todo'">
          <el-table-column
            label="委托单位"
            align="center"
            prop="organizationName"
            :show-overflow-tooltip="true"
          />
          <el-table-column label="联系人" align="center" prop="contactsName" />
          <el-table-column
            label="联系电话"
            align="center"
            prop="contactsMobile"
          />
          <el-table-column
            label="单位地址"
            align="center"
            prop="organizationAddress"
            :show-overflow-tooltip="true"
          />
          <el-table-column align="center" label="操作">
            <template slot-scope="{ row }">
              <el-button
                @click.native.prevent="toUrl(row._url, row)"
                type="text"
              >
                办理
              </el-button>
              <el-button
                v-if="row.processId"
                @click.native.prevent="handleFlowRecord(row)"
                type="text"
              >
                查看流程
              </el-button>
            </template>
          </el-table-column>
        </template>
      </el-table>
      <pagination
        class="more-pagination"
        v-show="moreTotal > 0"
        :total="moreTotal"
        :page.sync="moreQuery.pageNum"
        :limit.sync="moreQuery.pageSize"
        @pagination="getTodoDetailList"
      />

      <div slot="footer">
        <el-button @click="moreVisible = false">关 闭</el-button>
      </div>
    </el-dialog>

    <!-- 新增/修改 开票申请弹框 -->
    <AddEditInvoicingDialog
      :show.sync="showAddEditInvoicingDialog"
      operType="detail"
      :isEarly="true"
      :row="currInvoiceTip"
      @refresh="getInvoiceTip"
    ></AddEditInvoicingDialog>

    <WorkFlow ref="workFlow"></WorkFlow>
  </div>
</template>

<script>
import {
  detectionList,
  detectionDdd,
  getEnvironment,
  getSlidesDetectionInfo,
  equipmentListing,
  detectionRemove,
} from "@/api/slides/inspect";
import {
  homeCount,
  homeList,
  userHomeState,
  userHomeDownState,
  warningEquipment,
  warningDosageTimeout,
  dosageTimeoutInfo,
  agreementTip,
  invoiceTipList,
  getBacklog,
} from "@/api/index/index";
import {
  personalDosimeterList,
  personalDosimeterDetail,
} from "@/api/slides/task";
import { detectionEquipmentList } from "@/api/testItem/detectionResult";
import { listOss, listByIds, delOss } from "@/api/system/oss";
import {
  environmentList,
  environmentRecorders,
  environmentDetail,
  environmentAdd,
} from "@/api/basicData/environment";
import { VueEditor } from "vue2-editor";
import WorkFlow from "@/components/WorkFlow";
import AddEditInvoicingDialog from "@/views/person/invoicing/components/AddEditInvoicingDialog.vue";

import axios from "axios";
import { renderAsync } from "docx-preview";
import XLSX from "xlsx";

export default {
  name: "Index",
  dicts: ["sys_user_sex", "occupational_classification"],
  components: { VueEditor, WorkFlow, AddEditInvoicingDialog },
  data() {
    return {
      // 环境信息
      environmentVisible: false,
      formEnvironment: {},
      rulesEnvironment: {
        temperature: [
          { required: true, message: "温度不能为空", trigger: "blur" },
          {
            validator: (rule, value, callback) => {
              if (isNaN(value)) {
                callback(new Error("请输入正确的格式"));
              } else {
                callback();
              }
            },
          },
        ],
        humidity: [
          { required: true, message: "湿度不能为空", trigger: "blur" },
          {
            validator: (rule, value, callback) => {
              if (isNaN(value)) {
                callback(new Error("请输入正确的格式"));
              } else {
                callback();
              }
            },
          },
        ],
      },
      activeTab: null,
      isPer: false,
      // 指标
      indecate: {},
      // 通知列表
      noticeList: [],
      dialogVisibleView: false,
      openRow: {},
      formNotice: {},
      fileList: [],
      dialogVisibleWord: false,
      warningEquipmentList: [],
      dialogVisibleWarn: false,
      // 预警证书列表
      warningFileList: [],
      // 预警剂量计列表
      warningDosageTimeoutList: [],
      handleform: {},
      fileList: [],
      dialogVisiblehandle: false,
      // 日期校验
      pickerOptionsHandleF: {
        disabledDate: (time) => {
          return (
            time.getTime() > new Date(this.handleform.wearingEndTime).getTime()
          );
        },
      },
      pickerOptionsHandleS: {
        disabledDate: (time) => {
          return (
            time.getTime() <
            new Date(this.handleform.wearingBeginTime).getTime()
          );
        },
      },
      // 开票预警列表
      invoiceTipList: [],
      // 合同预警列表
      agreementTipList: [],
      // 待办列表
      todoList: [],
      // more详情弹窗相关
      moreTitle: "",
      moreVisible: false,
      moreLoading: false,
      moreList: [],
      moreType: "",
      moreQuery: {
        pageNum: 1,
        pageSize: 10,
        tasksState: -4,
      },
      moreTotal: 0,
      showAddEditInvoicingDialog: false,
      currInvoiceTip: {},
    };
  },
  created() {
    this.filterEntryList();
  },
  watch: {
    $route: {
      handler(val) {
        if (val.path == "/index") {
          // 温湿度权限控制
          let permissions = this.$store.getters.permissions;
          let found = permissions.find((item) => {
            return item == "slide:inspect";
          });
          this.isPer = found == "slide:inspect";
          if (this.isPer) {
            this.handleGetEnvironment();
          }
          this.getAll();
        }
      },
      immediate: true,
    },
  },
  computed: {
    filterContact() {
      return this.handleform.dosageContactsName || this.handleform.contactsName;
    },
    filterMobile() {
      return (
        this.handleform.dosageContactsMobile || this.handleform.contactsMobile
      );
    },
  },
  methods: {
    // 请求所有数据
    getAll() {
      this.getHomeCount();
      this.getHomeList();
      this.getWarningEquipment();
      this.getWarningDosageTimeout();
      this.getInvoiceTip();
      this.getAgreementTip();
      this.getTodoList();
    },
    // 过滤快捷入口
    filterEntryList() {
      let arr = [
        {
          name: "ContranctTask",
          title: "任务申请",
          subTitle: "Task Application",
          img: require("@/assets/index/taskapply.png"),
        },
        {
          name: "Inspect",
          title: "检测任务",
          subTitle: "Detection Task",
          img: require("@/assets/index/testtask.png"),
        },
        {
          name: "EquipmentTask",
          title: "结果录入",
          subTitle: "Result Entry",
          img: require("@/assets/index/result.png"),
        },
        {
          name: "Task",
          title: "检测报告",
          subTitle: "Examining Report",
          img: require("@/assets/index/body.png"),
          params: {
            isEntry: true,
          },
        },
      ];
      this.entryList = arr.filter((item) => {
        return (
          this.$store.state.permission.routes.findIndex((it) => {
            return (
              it.children &&
              it.children.findIndex((route) => route.name == item.name) != -1
            );
          }) != -1
        );
      });
    },
    // 查询当天首页关键指标
    getHomeCount() {
      homeCount().then((response) => {
        this.indecate = {
          applyNum: response.applyNum || 0,
          detectNum: response.detectNum || 0,
          reportNum: response.reportNum || 0,
          resultNum: response.resultNum || 0,
        };
      });
    },
    // 首页通知列表
    getHomeList() {
      homeList({
        pageNum: 1,
        pageSize: 10,
      }).then((response) => {
        this.noticeList = response.rows || [];
      });
    },
    // 设备预警列表
    getWarningEquipment() {
      warningEquipment().then((response) => {
        this.warningEquipmentList = response.data || [];
        this.warningEquipmentList.forEach((item) => {
          let obj = {}; /*
						{
							"无证书": [{}, {}, {}],
							"即将过期": [{}, {}, {}],
						}
					*/
          if (item.equipmentWarningMsgVo) {
            item.equipmentWarningMsgVo.forEach((it) => {
              if (obj.hasOwnProperty(it.warningMsg)) {
                obj[it.warningMsg].push(it);
              } else {
                obj[it.warningMsg] = [it];
              }
            });
          }
          item.obj = obj;
        });
      });
    },
    // 剂量计未寄回预警列表
    getWarningDosageTimeout() {
      warningDosageTimeout().then((response) => {
        this.warningDosageTimeoutList = response.data || [];
      });
    },
    /**
     * more事件
     * @param type todo 待办  contranctTask 合同预警 instrument 仪器预警 dosimeter 剂量计未寄回预警
     */
    handleOpenDetail(type = "todo") {
      this.moreType = type;
      this.moreQuery.pageNum = 1;
      this.moreQuery.pageSize = 10;
      switch (type) {
        case "todo":
          this.moreTitle = "我的待办";
          this.getTodoDetailList();
          break;
        case "contranctTask":
          this.moreTitle = "合同预警";
          break;
        case "instrument":
          this.moreTitle = "仪器预警";
          break;
        case "dosimeter":
          this.moreTitle = "剂量计未寄回预警";
          break;
        default:
          break;
      }
      this.moreVisible = true;
    },
    async getTodoDetailList() {
      this.moreLoading = true;
      let { code, rows, total } = await getBacklog(this.moreQuery);
      if (code == 200) {
        this.moreList = rows.map((item) => {
          return {
            ...item,
            _url: item.taskUrl,
          };
        });
        this.moreTotal = total;
      }
      this.moreLoading = false;
    },
    // 预警文件弹框
    openDialogFile(arr) {
      this.warningFileList = arr;
      this.dialogVisibleWarn = true;
    },
    // 预警文件预览
    viewFile(ossId) {
      if (ossId) {
        listByIds(ossId).then((response) => {
          window.open(response.data[0].url, "PDF", "");
        });
      }
    },
    // 开票预警列表
    getInvoiceTip() {
      invoiceTipList({ pageNum: 1, pageSize: 10000 }).then((response) => {
        this.invoiceTipList = response.rows || [];
      });
    },
    // 合同预警列表
    getAgreementTip() {
      agreementTip().then((response) => {
        this.agreementTipList = response.data || [];
      });
    },
    // 获取待办列表
    getTodoList() {
      personalDosimeterList({ tasksState: "-4" }).then((response) => {
        /* 外照射任务列表 */
        let list1 =
          response.rows?.map((item) => {
            return {
              ...item,
              _url: "Task",
            };
          }) || [];
        detectionEquipmentList({ tasksState: "-4" }).then((response) => {
          /* 设备任务 */
          let list2 =
            response.rows?.map((item) => {
              return {
                ...item,
                _url: "EquipmentTask",
              };
            }) || [];
          this.todoList = [...list1, ...list2];
        });
      });
    },
    // 查看流程
    handleFlowRecord(row) {
      this.$refs.workFlow.openDialog(row);
    },
    // 跳转页面
    toUrl(name, row) {
      this.moreVisible = false;
      this.$router.push({ name, params: { ...row, isTodo: true } });
    },
    // 打开办理对话框
    openhandleDialog(row) {
      this.handleform = {};
      personalDosimeterDetail(row.taskPersonalDosimeterId).then((response) => {
        if (response.data) {
          if (response.data.monitoringState != null) {
            response.data.monitoringState =
              response.data.monitoringState.toString();
          }
          this.handleform = response.data;
          // 获取列表
          dosageTimeoutInfo(row.taskPersonalDosimeterId).then((response) => {
            this.$set(this.handleform, "list", response.data || []);
          });
          this.dialogVisiblehandle = true;
        }
      });
    },
    // 快捷入口跳转
    goTarget(item) {
      this.$router.push({ name: item.name, params: item.params });
    },
    // 获取温度信息
    handleGetEnvironment() {
      getEnvironment().then((response) => {
        if (
          response.data &&
          response.data.temperature &&
          response.data.humidity
        ) {
          this.environment = {
            temperature: response.data.temperature,
            humidity: response.data.humidity,
          };
          this.$store.commit("settings/SET_ENVIRONMENT", {
            temperature: response.data.temperature,
            humidity: response.data.humidity,
          });
        } else {
          this.environmentVisible = true;
          this.$store.commit("settings/SET_ENVIRONMENT", {});
          this.formEnvironment = {};
          this.resetForm("formEnvironment");
        }
      });
    },
    // 点击开票预警
    handleInvoiceTip(row) {
      this.currInvoiceTip = row;
      this.showAddEditInvoicingDialog = true;
    },
    // 查看通知公告
    openViewNotice(item) {
      console.log("查看通知公告", item);
      // this.resetFormmy();
      this.fileList = [];
      this.formNotice = item;
      if (this.formNotice.ossId) {
        listByIds(this.formNotice.ossId).then((response) => {
          this.fileList = response.data;
          this.fileList.forEach((item) => {
            item.name = item.originalName;
          });
        });
      }
      console.log("this.fileList", this.fileList);
      this.openRow = item;
      this.dialogVisibleView = true;
      userHomeState(item.noticeId).then((response) => {
        /* 设置成已读状态 */
      });
    },
    // 预览附件（word和xlsx特殊）
    preView(item) {
      console.log("item", item);
      let lastIndex = item.url.lastIndexOf(".");
      let suffix = item.url.substring(lastIndex + 1);
      console.log("suffix", suffix);
      //文件格式是word文档、ppt、excel文件
      if (
        suffix == "doc" ||
        suffix == "docx" ||
        suffix == "ppt" ||
        suffix == "xls" ||
        suffix == "xlsx"
      ) {
        if (suffix == "doc" || suffix == "docx") {
          axios({
            method: "get",
            responseType: "blob",
            url: item.url,
            // url: "http://10.15.1.21:9001/radiation-hygiene/2023/05/12/583bf2e7b9664025ad0d14387a50b854.docx", // 自己的服务器，提供的一个word下载文件接口
          })
            .then(async (res) => {
              console.log("111", res);
              this.dialogVisibleWord = true;
              this.$nextTick(() => {
                let childRef = document.getElementsByClassName("docxRef");
                renderAsync(res.data, childRef[0]); //渲染
              });
            })
            .catch((r) => {
              console.error(r);
            });
        } else if (suffix == "xls" || suffix == "xlsx") {
          axios({
            method: "get",
            responseType: "blob",
            url: item.url,
          })
            .then(async (res) => {
              const reader = new FileReader();
              //通过readAsArrayBuffer将blob转换为ArrayBuffer对
              reader.readAsArrayBuffer(res.data); // 这里的res.data是blob文件流
              reader.onload = (event) => {
                // 读取ArrayBuffer数据变成Uint8Array
                var data = new Uint8Array(event.target.result);
                // 这里的data里面的类型和后面的type类型要对应
                var workbook = XLSX.read(data, { type: "array" });
                var sheetNames = workbook.SheetNames; // 工作表名称
                var worksheet = workbook.Sheets[sheetNames[0]];
                // var excelData = XLSX.utils.sheet_to_json(worksheet); //JSON
                let html = XLSX.utils.sheet_to_html(worksheet);
                this.dialogVisibleWord = true;
                this.$nextTick(() => {
                  console.log("1", document.getElementsByClassName("docxRef"));
                  document.getElementsByClassName("docxRef")[0].innerHTML =
                    html;
                });
              };
            })
            .catch((r) => {
              console.error(r);
            });
        } else {
          let fileUrl = encodeURIComponent(item.url);
          //使用Office Web查看器
          let officeUrl =
            "http://view.officeapps.live.com/op/view.aspx?src=" + fileUrl;
          window.open(officeUrl, "_target");
        }
      } else {
        //其他文件格式比如pdf、图片、html
        window.open(item.url);
      }
    },
    // 下载附件 (pdf和图片特殊)
    handleDownload(item) {
      let lastIndex = item.url.lastIndexOf(".");
      let suffix = item.url.substring(lastIndex + 1);
      // console.log("suffix", suffix);
      // if (suffix == 'docx') {
      // 	type == 'word';
      // }
      // if (suffix == 'pdf') {
      // 	type == 'pdf';
      // }
      // if (suffix == 'xlsx') {
      // 	type == 'xlsx';
      // }
      // if (suffix == 'png') {
      // 	type == 'img';
      // }

      let data = {
        url: item.url,
        name: item.name,
        type: suffix,
      };

      if (data.type == "png") {
        this.downloadImg(data);
      } else if (
        data.type == "pdf" ||
        data.type == "docx" ||
        data.type == "xlsx"
      ) {
        this.downloadFile(data);
      } else {
        this.downloadFile(data);
      }
      userHomeDownState(this.openRow.noticeId).then((response) => {
        /* 设置成已下载状态 */
      });
    },
    // 下载的为文件格式
    downloadFile(data) {
      fetch(data.url, {
        method: "get",
        mode: "cors",
      })
        .then((response) => response.blob())
        .then((res) => {
          const downloadUrl = window.URL.createObjectURL(
            //new Blob() 对后端返回文件流类型处理
            new Blob([res], {
              type:
                data.type == "pdf"
                  ? "application/pdf"
                  : data.type == "docx"
                  ? "application/msword"
                  : data.type == "xlsx"
                  ? "application/vnd.ms-excel"
                  : "",
            })
          );
          //word文档为msword,pdf文档为pdf
          const link = document.createElement("a");
          link.href = downloadUrl;
          link.setAttribute("download", data.name);
          document.body.appendChild(link);
          link.click();
          link.remove();
        })
        .catch((error) => {
          window.open(data.url);
        });
    },
    // 下载的为图片格式
    downloadImg(data, quality = 0.9) {
      this.pathToBase64(data.url, quality)
        .then((res) => {
          const link = document.createElement("a");
          link.href = res;
          link.setAttribute("download", data.name);
          document.body.appendChild(link);
          link.click();
          link.remove();
        })
        .catch((err) => {
          console.log(err);
        });
    },
    //获取Base64且压缩图片
    pathToBase64(url, quality = 1, width = 1, height = 1) {
      return new Promise((resolve, reject) => {
        let image = new Image();
        image.onload = function () {
          let canvas = document.createElement("canvas");
          canvas.width = image.width / width;
          canvas.height = image.height / height;
          canvas.getContext("2d").drawImage(image, 0, 0);
          let result = canvas.toDataURL("image/jpeg", quality);
          resolve(result);
        };
        image.setAttribute("crossOrigin", "Anonymous");
        image.src = url;
        image.onerror = () => {
          reject(new Error("urlToBase64 error"));
        };
      });
    },
    // 提交温度
    submitEnvironment() {
      this.$refs["formEnvironment"].validate((valid) => {
        if (!valid) return;
        environmentAdd(this.formEnvironment).then((response) => {
          this.$modal.msgSuccess("更新成功");
          this.environmentVisible = false;
          this.handleGetEnvironment();
        });
      });
    },
    changeTab(type) {
      console.log("切换tab", type);
      this.activeTab = type;
    },
  },
};
</script>

<style scoped lang="scss">
.box-title {
  display: flex;
  align-items: center;
  position: relative;

  .icon {
    width: 19px;
  }

  .title {
    margin-left: 8px;
    font-family: Alibaba PuHuiTi;
    font-weight: 600;
    font-size: 16px;
    color: #2c2f34;
  }

  .num {
    position: absolute;
    top: -5px;
    left: 90px;
    background-color: red;
    border-radius: 50%;
    color: #fff;
    font-size: 10px;
    font-weight: normal;
    width: 15px;
    height: 15px;
    display: flex;
    align-items: center;
    justify-content: center;
  }

  .more {
    font-family: Microsoft YaHei;
    font-weight: 400;
    font-size: 14px;
    color: #7a7c7e;
    cursor: pointer;
    position: absolute;
    right: 20px;
    top: 50%;
    transform: translateY(-50%);

    &:hover {
      color: #2a72ee;
    }
  }
}

.home {
  width: 100%;
  height: 100%;
  overflow-x: hidden;
  overflow-y: auto;
  background: transparent;
  padding: 0 0;

  .home-top {
    display: flex;
    justify-content: space-between;
    height: 240px;

    .left-box {
      width: 608px;
      min-width: 608px;
      height: 100%;
      padding: 15px 15px;
      border-radius: 8px;
      background-color: #ffffff;
      box-shadow: 0px 4px 10px 0px rgba(221, 227, 231, 0.25);

      .entry-list {
        margin-top: 20px;
        display: flex;
        justify-content: space-between;
        flex-wrap: wrap;

        .entry-item {
          width: 48%;
          height: 80px;
          padding: 0px 30px;
          background: #f7faff;
          border-radius: 8px;
          display: flex;
          align-items: center;
          justify-content: space-between;
          cursor: pointer;

          .text-box {
            display: flex;
            flex-direction: column;
            .cname {
              font-family: Alibaba PuHuiTi;
              font-weight: 500;
              font-size: 18px;
              color: #1e4d9b;
            }
            .desc {
              margin-top: 8px;
              font-family: Alibaba PuHuiTi;
              font-weight: 500;
              font-size: 14px;
              color: #a6bee5;
            }
          }

          img {
            width: 47px;
          }
        }
      }
    }

    .right-box {
      flex: 1;
      margin-left: 15px;
      padding: 15px 15px;
      border-radius: 8px;
      background: #ffffff;
      box-shadow: 0px 4px 10px 0px rgba(221, 227, 231, 0.25);

      .table {
        margin-top: 15px;
      }
    }
  }

  .home-middle {
    margin-top: 15px;
    display: flex;
    justify-content: space-between;
    height: 240px;

    .left-box {
      width: calc(50% - 10px);
      min-width: 608px;
      height: 100%;
      padding: 15px 15px;
      border-radius: 8px;
      background-color: #ffffff;
      box-shadow: 0px 4px 10px 0px rgba(221, 227, 231, 0.25);

      .table {
        margin-top: 20px;
      }
    }

    .right-box {
      width: calc(50% - 7px);
      height: 100%;
      padding: 15px 15px;
      border-radius: 8px;
      background-color: #ffffff;
      box-shadow: 0px 4px 10px 0px rgba(221, 227, 231, 0.25);

      .table {
        margin-top: 20px;
      }
    }
  }

  .home-bottom {
    margin-top: 15px;
    display: flex;
    justify-content: space-between;
    height: 250px;

    .left-box {
      width: calc(50% - 10px);
      min-width: 608px;
      height: 100%;
      padding: 15px 15px;
      border-radius: 8px;
      background-color: #ffffff;
      box-shadow: 0px 4px 10px 0px rgba(221, 227, 231, 0.25);

      .table {
        margin-top: 20px;
      }
    }

    .right-box {
      width: calc(50% - 7px);
      height: 100%;
      padding: 15px 15px;
      border-radius: 8px;
      background-color: #ffffff;
      box-shadow: 0px 4px 10px 0px rgba(221, 227, 231, 0.25);

      .table {
        margin-top: 20px;
      }
    }
  }
}

.innertitle {
  position: relative;
  color: #252d57;
  font-weight: bold;
  padding-left: 15px;
  font-size: 18px;
  line-height: 20px;
  margin-bottom: 10px;
  &::before {
    content: "";
    width: 5px;
    height: 100%;
    background-color: #2a72ee;
    border-radius: 5px;
    position: absolute;
    left: 0;
    bottom: 0;
  }
}

.more-pagination {
  position: relative !important;
  left: 0;
  bottom: 0;
  margin-bottom: 30px;
}

.viewdialog {
  ::v-deep .quillWrapper .ql-snow.ql-toolbar {
    display: none;
  }
  ::v-deep .ql-container {
    border: none;
  }
  .viewtitle {
    font-size: 20px;
    font-weight: bolder;
    text-align: center;
  }
  .viewinfo {
    color: #999999;
    margin: 15px 0 10px 0;
    text-align: center;
    padding-bottom: 10px;
    border-bottom: 1px solid #e6e6e6;
    .blank {
      margin-right: 15px;
    }
  }
  .filelist {
    padding-left: 20px;
    border-top: 1px solid #e6e6e6;
    padding-top: 20px;
    margin-bottom: 20px;
    .filetitle {
      font-weight: bolder;
    }
    .filename {
      cursor: pointer;
      &:hover {
        color: #999;
      }
    }
    .download {
      color: #2a72ee;
      cursor: pointer;
      margin-left: 50px;
      &:hover {
        text-decoration: underline;
      }
    }
  }
}

.dialogVisibleWord {
  ::v-deep .el-dialog {
    width: 100%;
    height: 100%;
    max-height: 100%;
    .el-dialog__body {
      height: 93%;
      overflow: auto;
    }
  }
}

.viewfile {
  color: #2a72ee;
  cursor: pointer;
  margin-right: 10px;
  &:nth-last-of-type(1) {
    margin-right: 0;
  }
  &:hover {
    text-decoration: underline;
  }
}

::v-deep .el-table {
  &::before {
    height: 0;
  }
  .el-table__body-wrapper {
    &::-webkit-scrollbar-track-piece {
      background: #d3dce6;
    }
    &::-webkit-scrollbar {
      width: 6px;
    }
    &::-webkit-scrollbar-thumb {
      background: #99a9bf;
      border-radius: 20px;
    }
  }
}
</style>
